<template>
	<div :class="[liveBackBoxClass]" ref="liveback">
		<div class="header-nav">
			<ul v-if="tabIsShow">
				<li  @click="getLiveBackData(index,v.id)" :class="{active:cur==index}" v-for="(v,index) in  navTitle" :key="index">
					<p >{{v.title}}</p>
				</li>
			</ul>
			<div class="liveback-connect-box">
				<VideoInline :list="liveBackData"   :preImagUrl='isPreImagUrl'></VideoInline>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		props:{
			noNavLength:String,//noNav  没有nav
			videoInfo:Object,
		},
		data(){
			return{
				videoId: this.$route.params.id, //回看传过来的id
				liveBackBoxClass :'',
				navTitle: [],
				cur: 0,
				liveBackData: [],
				pushLiveBackData:[],
				flag:true,
				page:1,
                id:"",
				tabIsShow:false,
				isPreImagUrl:true,
				tabClearTime:"",
				getPlatform: fun.getPlatform(), //app wx
			}
		},
		watch: {
		},
		created(){
			if(this.noNavLength == 'noNav'){
				if(this.$channel=='zyzq'&& this.getPlatform == 'app'){
                    this.liveBackBoxClass = 'no-nav-zyzq';
				}else{
					this.liveBackBoxClass = 'no-nav';
				}
			    
			}else{
				if(this.$channel=='zyzq'&& this.getPlatform == 'app'){
                     this.liveBackBoxClass = 'live-back-box-zyzq';
				}else{
                 this.liveBackBoxClass = 'live-back-box';
				}
				
			};
			  this.getLiveBackTitle()
		},
		mounted(){
			let _this = this;
		   _this.$refs.liveback.onscroll = function() {
			let scrollTop = _this.$refs.liveback.scrollTop
			let windowHeight = document.documentElement.clientHeight || document.body.clientHeight; 
			let scrollHeight = _this.$refs.liveback.scrollHeight;
			//console.log("scrollTop:"+scrollTop+"windowHeight:"+windowHeight+"scrollHeight:"+scrollHeight)
			if((scrollTop + scrollHeight +6) >= windowHeight && _this.flag) {
				_this.flag = false;
		   		_this.tabClearTime = setTimeout(function () {
					_this.flag = true;
				},500)
				_this.page++
						_this.$http.get('/h5live/getRoomVideoList?p=' + _this.page + '&type=' + _this.id+'&anchor='+_this.roomInfo.roomInfo.anchor ).then((res) => {
							if(res.data.code == '000000') {
								_this.pushLiveBackData = res.data.data
								if(!res.data.data.length){
									clearTimeout(_this.tabClearTime)
									_this.flag = false;
								}
								for(var i = 0; i < _this.pushLiveBackData.length; i++) {
									_this.liveBackData.push(_this.pushLiveBackData[i]);
								}
							}
						}, (err) => {
							console.log(err);
						})				
			}
		}
			
		},
		methods:{
      //直播间回看视频列表table nav
      	getLiveBackTitle() {
				this.$http.get('/h5live/vod/getRoomVideoType?vid='+this.videoId).then((res) => {
					const {code,data} = res.data
					if(code == '000000') {
						if(data.length==0  || data.length==1 ){		
							this.tabIsShow = false;
							this.$http.get('/h5live/vod/getRoomVideoList?p=1'+'&vid='+this.videoId+'&type='+'' ).then((res) => {
								if(res.data.code == '000000') {
									this.liveBackData = res.data.data;
								}
								}, (err) => {
										console.log(err);
								})
						}else {
						  this.tabIsShow = true;
						  this.navTitle = res.data.data;
						  this.id = res.data.data[0].id
						  this.getLiveBackData(0,res.data.data[0].id)
						}
	                   
					}
				}, (err) => {
					console.log(err);
				})
			},
			//直播间往期回看
			getLiveBackData(index,id) {
				this.cur = index
				this.flag = true
				this.id = id
				this.page = 1
				this.liveBackData = []
				this.$http.get('/h5live/vod/getRoomVideoList?p=1'+'&type='+id+'&vid='+this.videoId).then((res) => {
					if(res.data.code == '000000') {
						this.liveBackData = res.data.data;
					}
				}, (err) => {
					console.log(err);
				})
			},
			
		}
			
		
	}
</script>

<style scoped="scoped">
	::-webkit-scrollbar {
		display: none; /* Chrome Safari */
		}
	.live-back-box{
		width: 100%;
		flex: 1;
		background: white;
		padding-top: 20px;
	}
	.no-nav{
		width: 100vw;
		height: calc(100vh - 494px);
		background: white;
		padding-top: 20px;
	}
	.live-back-box .header-nav ul+.liveback-connect-box{
        height: auto;
		overflow-y: scroll;
	}
	.live-back-box .header-nav .liveback-connect-box{
		height: auto;
		overflow-y: scroll;
	}
	.no-nav .header-nav .liveback-connect-box{
        height: auto;
		overflow-y: scroll;
	}
	.no-nav-zyzq .header-nav .liveback-connect-box{
        height: auto;
		overflow-y: scroll;
	}
	.no-nav .header-nav ul+.liveback-connect-box{
        height: auto;
		overflow-y: scroll;
	}
	.liveback-connect-box .h-great-list /deep/ li{
		margin-top: 0;
		margin-bottom: 20px;
	}
	.header-nav>ul {
			width: calc(100% - 60px);
			margin: 0 auto;
			padding-bottom: 20px;
			display: flex;
			overflow-x: scroll;
		}
		
	.header-nav ul li {
			flex-shrink: 0;
			min-width: 130px;
			padding: 14px 28px;
			margin-right: 15px;
			text-align: center;
			line-height: normal;
			font-size: 26px;
			font-weight: 400;
			color: #B5B5B5;;		
			background: #F6F6F6;
			border-radius: 15px;
		}
	.header-nav ul li.active {
		background: rgb(204,53,56);
		color: white !important;
		border-radius: 15px;
	}
</style>